<template>
  <div class="Visited_statistics" id="Visited_statistics">
    <div class="tips">
      页面说明
      <a-tooltip placement="right">
        <template #title>
          <span>访客对您网站各个页面的访问情况。重点考量浏览量、访客数、贡献下游浏览量和平均停留时长；</span>
        </template>
        <span class="iconfont icon-hint1"></span>
      </a-tooltip>
    </div>
    <div class="selectSite">
      <getSite @handleChange="handleChange" ref="getSite_ref"></getSite>
    </div>
    <div class="Visited_statistics_detail">
      <div class="visitDetail_header">
        <div class="timeSelect">
          <!-- 所属时间模块部分 -->
          <commonDatePick :formData='formData' @select-type="selectType" @selectTimeChange="selectTimeChange" ref="commonDatePick_ref"></commonDatePick>
        </div>
        <div class="searchContent">
          <a-input v-model:value="formData.accessUrl" placeholder="搜索URL" style="width: 292px" @blur="handleChange" @pressEnter="handleChange" allow-clear>
            <template #suffix>
              <i class="iconfont icon-search" @click="handleChange"></i>
            </template>
          </a-input>
        </div>
      </div>
    </div>
    <div class="tendency_statistics_charts">
      <div class="scrollSection">
        <!-- 表格展示部分 -->
        <baseTable :columns="columns.visitedStatisticsColumns" :dataSource="configData.records" :isSelect="true"
          ref="sensitiveBaseTables" :isShowPagination="isShowPagination" :scroll="scroll" :rowSelection="1"
          :total="configData.total" @changePage="changePage">
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.ellipsis">
              <table-tool-tip :text="text" :column="column"></table-tool-tip>
            </template>
            <template v-if="column.dataIndex == 'accessUrl'">
              <a class="sourceUrl" @click="goFront(record.accessUrl)">{{ text }}</a>
            </template>
            <template v-if="column.dataIndex == 'averagePageTime'">
              <span>{{ transverterMss(record.averagePageTime || 0) }}</span>
            </template>
          </template>
        </baseTable>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, onBeforeMount, onUnmounted, reactive, watch, computed } from "vue";
import request from "@/api/index";
import columns from "@/components/table/tableConfig/tableColumn/siteStatistics";
import { getTableScroll } from "@/components/table/tableConfig/table";
import baseTable from "@/components/table/baseTable.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import commonDatePick from '../commonHeader/date.vue';
import getSite from '../commonHeader/getSite.vue';
import { transverterMss } from '@/utils/common';

// type flowColumns
interface dataSourceType {
  [propName: string]: any;
}
//data
const sectionValue = ref();

const getSite_ref = ref();
const statisticsDto = ref([{
  label: '浏览量(PV)',
  param: 'pvNum',
  value: ''
}, {
  label: '访问数(UV)',
  param: 'uvNum',
  value: ''
}, {
  label: 'IP数',
  param: 'ipNum',
  value: ''
}, {
  label: '跳出率',
  param: 'bounceRate',
  value: '',
  after: '%'
}, {
  label: '平均访问时长',
  param: 'averageVisitLength',
  value: ''
},])
//表格展示

const commonDatePick_ref = ref();
let selectTimeRange = ref<(string | number)[]>([]); //选择时间范围

const formData = reactive<dataSourceType>({
  accessUrl: '',
  selectTimeOption: 1,
  TimeOptions: [{
    label: '今天',
    value: 1
  }, {
    label: '昨天',
    value: 2
  }, {
    label: '最近7天',
    value: 3
  }, {
    label: '最近30天',
    value: 4
  }],
})
//表格数据
let configData = reactive<dataSourceType>({ total: 0, size: 10, records: [] });
let scroll: dataSourceType = reactive({ y: '', isFixed: false }); // 表单滚动设置
const isShowPagination = true; // 是否需要配分页器
//分页
const pageNumber = ref(1);
const pageSize = ref(10);

//methods
const handleChange = (value: any) => {//选择变化
  nextTick(() => {
    getVisitedPage();
  });
};
// 获取在线统计数据
const getVisitedPage = async () => {
  selectTimeRange.value = commonDatePick_ref.value.selectTimeRange;
  let data: dataSourceType = {
    siteId: getSite_ref.value.sectionValue,
    startTime: selectTimeRange.value[0],
    endTime: selectTimeRange.value[1],
    pageNumber: pageNumber.value,
    pageSize: pageSize.value,
    accessUrl: formData.accessUrl
  }
  await request.getVisitedPage(data).then((res: dataSourceType) => {

    configData.records = res.records;
    configData.total = res.total
    configData.records.forEach((item: dataSourceType, index: number) => item.index = index + 1);
    nextTick(() => {
      let obj = getTableScroll(74, "Visited_statistics", 110);
      scroll.y = obj.y;
      scroll.isFixed = obj.isFixed;
    })
  });
}
//选择搜索项
const selectType = (item: dataSourceType, type: string) => {
  formData[type] = item.value;
  nextTick(() => {
    getVisitedPage();
  })
}
const selectTimeChange = () => {
  selectTimeRange.value = commonDatePick_ref.value.selectTimeRange;
  getVisitedPage();
}

const goFront = (url: any) => {
  if (url) {
    window.open(url);
  }
}
//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  pageNumber.value = data.pageCurrent;
  pageSize.value = data.pageSize;
  getVisitedPage();
};
//onMounted

onMounted(() => {
  getVisitedPage();
});

</script>

<style lang="less" scoped>
.Visited_statistics {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background: #fff;
  overflow: hidden;

  .tips {
    margin-bottom: 24px;
    font-size: 14px;
    color: #333;
  }

  .charts {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 24px;

    .pv_uvlists {
      display: flex;
      padding: 24px;

      .pv_uvlists_item {
        width: 180px;
        display: flex;
        flex-direction: column;

        div:nth-of-type(2) {
          margin-top: 8px;
        }
      }

    }
  }

  .Visited_statistics_detail {
    .visitDetail_header {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      width: 90%;
      padding-top: 24px;
      margin-bottom: 24px;

      .timeSelect {
        margin-right: 24px;
      }

      .item {
        height: 40px;
        margin-right: 24px;
        margin-bottom: 24px;
      }
    }

    .searchContent {
      .ant-input-affix-wrapper {
        height: 32px;
      }
    }
  }

  .sourceUrl {
    cursor: pointer;
    color: #1F6DED;
  }

}
</style>
<style lang="scss">
.Visited_statistics_detail {


  .options {
    display: flex;
    align-items: center;
    font-size: 14px;

    .options_label {
      margin-right: 12px;
    }

    .options_content {
      margin-right: 12px;
      border: 1px solid var(--theme_button_bg_color, #1F6DED);
      display: flex;
      border-radius: 4px;

      span {
        padding: 4px 14px;
        color: #333;
        border-right: 1px solid var(--theme_button_bg_color, #1F6DED);
      }

      span:nth-last-of-type(1) {
        border-right: none;
      }

      span:hover {
        background: var(--theme_button_hover_bg_color, #4892fa);
        border-color: var(--theme_button_hover_bg_color, #4892fa);
        color: #fff;
      }

      .activeOption {
        color: #fff;
        background: var(--theme_button_bg_color, #1F6DED);
      }
    }
  }


}

.tendency_statistics_charts {
  .ant-table-column-sorters {
    max-width: 100px;
  }
}
</style>